<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            /*background: cadetblue;*/
        }

        #logo{
            height: 50px;
            left:25%;
            top:50px;
            position: absolute;
        }
        #aaa{
            height: 50px;
            left:25%;
            top:100px;
            position: absolute;
            margin-top: 20px;
        }
        #item{

            left:25%;
            top:200px;

            width: 300px;
            height: 400px;

            position: absolute;

        }


        #email{
            height: 25px;
            width:300px;
            padding: 7px 5px;
            margin: 10px 0;
            display: block;
            font-size: 18px;
            border-radius: 5px;
            background: transparent;
            border: 1.5px solid #87CEFA;

        }
        #password{
            height: 25px;
            width:300px;
            padding: 7px 5px;
            margin: 10px 0;
            display: block;
            font-size: 18px;
            border-radius: 5px;
            border: none;
            background: transparent;
            border: 1.5px solid #87CEFA;
        }

        #anniu{
            background: rgb(26, 188, 156);
            padding: 10px;
            font-size: 20px;
            display: block;
            width: 150px;
            border: none;
            color: #fff;
            border-radius: 5px;
            left:25%;
            position: absolute;
            cursor: pointer;
        }
        #biaoqian{
            text-decoration: none;
        }
        #zhuce{
             text-decoration: none;
         }
        #img{
            color:rgba(81, 203, 238, 1);
            text-decoration: none;
            font-size: 2.5em;

        }

    </style>
</head>

<body background="timg2.jpg">
<div id="logo">
    <a href="" id="img" > 酷睿影评</a>
</div>
<div id="aaa">
    <h2>
        酷睿欢迎你
    </h2>
</div>

<div id="item">
<form action="#" id="login_form">
    <div >
        <label>账号</label>&nbsp &nbsp
        <input type="text"  placeholder="邮箱/手机号/用户名" id="email" name="username" class="input">
    </div>
    <br>
    <div>
        <label>密码</label>&nbsp &nbsp
        <input id="password" name="password" type="password" class="basic-input" >
    </div>
    <br>
    <div style="margin-left: 35px;">
        &nbsp &nbsp&nbsp &nbsp&nbsp&nbsp&nbsp
        <a href="register.html" id="zhuce">注册账号</a>| <a href="ResetPassword.html" id="biaoqian">忘记密码</a>
    </div>
    <br>
        <input id="anniu" type="button" value="登  录" onclick="login('login_form')">        
    </form>
</div>
<script>
function login(id) {
	var fom = document.getElementById(id);
	var formData = new FormData(fom);
	var rep = {};
	fetch('/CoolReal/login', {
			method: 'POST',
			 credentials: 'include',
			body:encodeURI(Array.from(formData.entries()).map(el=>el.join('=')).join('&')),
		headers:{
			"Content-type":"application/x-www-form-urlencoded;charset=utf-8"
		}
	})
	.then(response => response.json())
	.catch(error => console.error('Error:', error))
	.then(response => {
		console.log('Success:', response);
    if (response.status==1){
        sessionStorage.setItem('currentUser',JSON.stringify(response.data));
        window.location.href='../zzy/homepage.html';
    }else{

        alert(response.message);
    }
		return response;
	});

	// response => console.log('Success:', response);
	// function(response){
	// 	console.log('Success:', response);
	// }
}

</script>
</body>
</html>